<template>
  <div class="container">
    <div class="login-box">
      <div v-if="flag" class="title">登录</div>
      <div v-else class="title">注册</div>
      <div class="register" @click="register">
        {{ flag ? "注 册" : "登 录" }}
      </div>
      <div v-if="flag" class="form-box">
        <el-form
          ref="loginFormRef"
          :model="loginForm"
          status-icon
          :rules="loginRules"
          label-width="120px"
          class="demo-ruleForm"
        >
          <el-form-item prop="userAccount">
            <el-input
              class="input"
              v-model="loginForm.userAccount"
              autocomplete="off"
              placeholder="用户名"
              :prefix-icon="User"
            />
          </el-form-item>
          <el-form-item prop="userPassword">
            <el-input
              v-model="loginForm.userPassword"
              type="password"
              autocomplete="off"
              placeholder="密码"
              class="input"
              :prefix-icon="Lock"
            />
          </el-form-item>
          <el-form-item>
            <div class="btn-box">
              <button class="submit" @click="submitForm(loginFormRef)">
                登录
              </button>
            </div>
          </el-form-item>
          <el-form-item>
            <span class="txt1">通过以下平台登录</span>
            <div class="other-icon">
              <div class="icon1"></div>
              <div class="icon2"></div>
              <div class="icon3"></div>
              <div class="icon4"></div>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div v-else class="form-box">
        <el-form
          ref="registerFormRef"
          :model="registerFrom"
          status-icon
          :rules="registerRules"
          label-width="120px"
          class="demo-ruleForm"
        >
          <el-form-item prop="userAccount">
            <el-input
              class="input"
              v-model="registerFrom.userAccount"
              autocomplete="off"
              placeholder="用户名"
              :prefix-icon="User"
            />
          </el-form-item>
          <el-form-item prop="userPassword">
            <el-input
              v-model="registerFrom.userPassword"
              type="password"
              autocomplete="off"
              placeholder="密码"
              class="input"
              :prefix-icon="Lock"
            />
          </el-form-item>
          <el-form-item prop="checkPassword">
            <el-input
              v-model="registerFrom.checkPassword"
              type="password"
              autocomplete="off"
              placeholder="确认密码"
              class="input"
              :prefix-icon="Lock"
            />
          </el-form-item>
          <el-form-item>
            <div class="btn-box">
              <button class="submit" @click="registerForm(registerFormRef)">
                注册
              </button>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue"
import type { FormInstance, FormRules } from "element-plus"
import { ElMessage } from "element-plus"
import { userLogin, userRegister } from "../request/login-view/login"
import { useRouter } from "vue-router"
import { User, Lock } from "@element-plus/icons-vue"
import { mainStore } from "../stores/stores"

const store = mainStore()

const router = useRouter()

type RuleFormType = {
  userAccount: string
  userPassword: string
}

const loginForm: RuleFormType = reactive({
  userAccount: "",
  userPassword: "",
})

type RegisterFromType = {
  checkPassword: string
  userAccount: string
  userPassword: string
}

const registerFrom: RegisterFromType = reactive({
  checkPassword: "",
  userAccount: "",
  userPassword: "",
})

const flag = ref(true)

// 登录===
const loginFormRef = ref<FormInstance>()

const loginRules = reactive<FormRules>({
  userAccount: [
    { required: true, message: "请输入账号", trigger: "blur" },
    { min: 5, max: 10, message: "长度为5～10", trigger: "blur" },
  ],
  userPassword: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 5, max: 10, message: "长度为5～10", trigger: "blur" },
  ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      userLogin({ ...loginForm }).then((res: any) => {
        console.log(res.data)

        store.userId = res.data.data.id
        localStorage.setItem("userId", res.data.data.id)
        ElMessage({
          message: "登录成功",
          type: "success",
        })
        router.push("/home")
      })
    } else {
      ElMessage.error("登录失败")
    }
  })
}

// 注册====
const registerFormRef = ref<FormInstance>()

const validatePass2 = () => {
  return (rule: any, value: any, callback: any) => {
    if (
      value !== registerFrom.userPassword &&
      registerFrom.userPassword !== ""
    ) {
      callback(new Error("两次输入密码不一致!"))
    } else {
      callback()
    }
  }
}
const validatePass1 = () => {
  return (rule: any, value: any, callback: any) => {
    if (
      value !== registerFrom.checkPassword &&
      registerFrom.checkPassword !== ""
    ) {
      callback(new Error("两次输入密码不一致!"))
    } else {
      callback()
    }
  }
}
const registerRules = reactive<FormRules>({
  userAccount: [
    { required: true, message: "请输入账号", trigger: "blur" },
    { min: 5, max: 10, message: "长度为5～10", trigger: "blur" },
  ],
  userPassword: [
    { required: true, message: "请输入密码", trigger: "change" },
    { min: 5, max: 10, message: "长度为5～10", trigger: "change" },
    { validator: validatePass1(), trigger: "change" },
  ],
  checkPassword: [
    { required: true, message: "请输入密码", trigger: "change" },
    { min: 5, max: 10, message: "长度为5～10", trigger: "change" },
    { validator: validatePass2(), trigger: "change" },
  ],
})

const registerForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      userRegister({ ...registerFrom }).then((res: any) => {
        console.log(res)
        if (res.data.code == 0) {
          registerFrom.userAccount = ""
          registerFrom.userPassword = ""
          registerFrom.checkPassword = ""
          ElMessage({
            message: "注册成功",
            type: "success",
          })
        }
        ElMessage.error(res.data.message)
      })
    } else {
      ElMessage.error("注册失败")
    }
  })
}

// 切换注册与登录
const register = () => {
  flag.value = !flag.value
}
</script>

<style lang="scss">
.el-form-item__content {
  margin-left: 30px !important;
}
.el-input__wrapper {
  border-radius: 20px !important;
}
.el-form-item__error {
  left: 50px !important;
}
</style>
<style lang="scss" scoped>
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-image: url("../assets/images/login-bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  .login-box {
    position: relative;
    width: 450px;
    height: 420px;
    margin-top: -100px;
    background: #ffffff8f;
    border-radius: 8px;
    box-shadow: 0 0 10px 2px #00000029;
    .title {
      width: 100%;
      height: 100px;
      font-size: 24px;
      line-height: 100px;
      text-align: center;
    }
    .register {
      position: absolute;
      top: 0;
      right: 10px;
      padding: 20px 8px;
      color: white;
      font-size: 12px;
      background: #409eff;
      border-bottom-right-radius: 20px;
      border-bottom-left-radius: 20px;
      cursor: pointer;
      writing-mode: tb-rl;
      &:hover {
        background: #63acf4;
      }
    }
    .form-box {
      width: 100%;
      .el-form-item {
        width: 425px;
        margin-bottom: 24px;
      }
      .btn-box {
        display: flex;
        justify-content: center;
        width: 100%;
      }
      .input {
        height: 48px;
        margin: 0 40px;
      }
      .submit {
        width: 200px;
        height: 50px;
        color: white;
        background: #409eff;
        border: none;
        border-radius: 30px;
        cursor: pointer;
        &:hover {
          background: #63acf4;
        }
      }
      .txt1 {
        display: block;
        width: 100%;
        text-align: center;
      }
      .other-icon {
        display: flex;
        justify-content: center;
        width: 100%;
        margin-top: 12px;
        div {
          width: 30px;
          height: 30px;
          margin: 0 12px;
          background-repeat: no-repeat;
          background-size: cover;
          cursor: pointer;
        }
        .icon1 {
          background-image: url("../assets/images/QQ.png");
        }
        .icon2 {
          background-image: url("../assets/images/微信.png");
        }
        .icon3 {
          background-image: url("../assets/images/手机.png");
        }
        .icon4 {
          background-image: url("../assets/images/支付宝支付.png");
        }
      }
    }
  }
}
</style>
